<template>
	<div class="vol_meeting">
		<base-search placeholder="请输入讲者姓名、手机号、会议号搜索" @search="handleCustomSearch"></base-search>
		<div class="vol_meeting_list">
			<van-empty
				v-if="list.length==0"
			   	image="//projectimg-1256680128.cos.ap-beijing.myqcloud.com/lpm/bd4d50fd-1214-423a-bbe8-2bc72dbd45b3.png"
			   	image-size="80"
			   	description="您尚未申请会议。"
			/>
			<van-list
				v-model:loading="loading"
        :finished="total <= list.length"
        finished-text="没有更多会议了"
        @load="loadMore"
			>
				<base-card
					v-for="(item, index) in list"
					:key="'basecard' + index"
					:class="index ? 'mt-3' : ''"
					:title="item.topic"
				>
					<template #titleAction>
						<van-tag type="primary" v-if="item.type == 1">线上会</van-tag>
						<van-tag type="success" v-if="item.type == 0">线下会</van-tag>
					</template>
					<div class="card-container">
						<van-cell title="会议编码">
							{{ item.meetingCode || '--' }}
							<van-button size="mini" icon="column" class="ml-2" @click.stop="handleCopy(item.meetingCode)">复制</van-button>
						</van-cell>
						<van-cell title="会议时间">{{ item.meetingTime || '--' }}</van-cell>
						<van-cell title="会议状态">{{ getMeetingStatus(item.status) }}</van-cell>
						<van-cell title="参会讲者">
							<base-more-avatar
								:list="getSpeaker(item.speakerJson)"
								@click="clickAvatar"
								@click:more="clickMore"
							></base-more-avatar>

							<!--{{ getSpeaker(item.speakerJson) }}-->
						</van-cell>
						<van-cell v-if="item.type == 1" title="会议号">
							腾讯会议：{{ item.onlineCode || '--' }}
							<van-button size="mini" icon="column" class="ml-2" @click.stop="handleCopyOnlineCode(item)">复制</van-button>
						</van-cell>
						<van-cell title="会议海报"><van-button size="mini" icon="photo-o" class="ml-4" @click.stop="handleViewPoster(item)">点击查看</van-button></van-cell>
					</div>
					<view class="card-handle van-hairline--top" style="margin-bottom: -15px;">
						<div class="text-danger" @click.stop="cancelMeetingHandler(item)">
							<van-icon name="delete-o" />
							<span>取消会议</span>
						</div>
            <div v-if="isAllowEditMeeting(item)" @click.stop="clickEdit(item.id)" class="text-primary van-hairline--left">
							<van-icon name="edit" />
							<span>编辑会议</span>
						</div>
						<div @click.stop="clickDetail(item.id)" class="text-primary van-hairline--left">
							<van-icon name="eye-o" />
							<span>会议详情</span>
						</div>
					</view>
				</base-card>
			</van-list>
			<van-back-top right="5vw" bottom="17vh" style="z-index:101" />
		</div>
		<van-dialog
			confirm-button-text="关闭"
			@confirm="posterDialogVisible = false"
			style="text-align: center"
			v-model:show="posterDialogVisible"
			title="长按保存图片"
		>
		<van-image :src="`//${posterImgUrl}`" fit="contain" height="60vh">
			<template v-slot:loading>
				<van-loading type="spinner" size="20" />
			</template>
		</van-image>

		</van-dialog>
		<MeetingApply ref="refApplyMeeting" @refresh="handleSearch"></MeetingApply>
	</div>
</template>

<script setup>
import MeetingApply from './components/apply.vue'
import useList from '@/hooks/useList'
import { ref, onMounted, inject } from 'vue'
import { showToast, showSuccessToast, showConfirmDialog } from 'vant'
import useUtils from '@/hooks/useUtils';
import useClipboard from 'vue-clipboard3'
import { useRouter } from 'vue-router'

const router = useRouter()
const api = inject('api')
const { toClipboard } = useClipboard()
const refApplyMeeting = ref()
const posterDialogVisible = ref(false)
const posterImgUrl = ref(null)

const {
	search,
	list,
	total,
	loading,
  loadMore,
	handleClearSearch,
	handleSearch
} = useList({
	queryApi: api.meetingList,
	search: {
		key: ''
	}
})

// 是否允许编辑会议
const isAllowEditMeeting = (item) => {
  if (item.status === 6) return false
  return true
}
const handleCustomSearch = (val) => {
	search.key = val
	handleSearch()
}

// 编辑会议
const clickEdit = (id) => {
  refApplyMeeting.value.edit(id);
}
// 查看会议详情
const clickDetail = (id) => router.push(`/vol/detail-meeting/${id}`)
// 获取会议状态
const getMeetingStatus = (status) => useUtils().meetingAuditStatus(status)

// 获取讲者列表
const getSpeaker = (speakerJson) => {
	return JSON.parse(speakerJson).map(item => {
		if (item.avatar && !item.avatar.startsWith('//') && !item.avatar.startsWith('http')) {
			item.avatar = `//${item.avatar}`
		}
		return item
	})
	// const list = JSON.parse(speakerJson).map(item => item.speakerName)
	// return list.join('，')
}
const clickAvatar = (val) => { 
	console.log(val )
}
const clickMore = (val) => { 
	// console.log(val )
}
//查看海报
const handleViewPoster = (item) => {
	posterDialogVisible.value = true
	posterImgUrl.value = item.posterImg
}

const cancelMeetingHandler = (item) => {
	showConfirmDialog({
		title: '取消会议',
		message: '确定取消该会议吗？'
	}).then(() => {
		return api.meetingCancel(item.id)
	}).then((res) => {
		if (!res.code) {
			showToast('取消成功')
			handleSearch()
		}
	})
	.catch(() => {})
}

const handleCopyOnlineCode = async (item) => {
	try {
    var speakerList = JSON.parse(item.speakerJson)
    var zhuxi = '';
    speakerList.forEach((item)=>{
      if (item.roleId == 2){
        zhuxi = zhuxi+item.speakerName+";"
      }
    })

		await toClipboard(`腾讯会议\n讲题:${item.topic}\n主席:${zhuxi}\n会议号：${item.onlineCode}\n入会链接：${item.speakerUrl}`)
		showSuccessToast('复制成功')
	} catch (err) {
		showToast('复制失败')
	}
}

const handleCopy = async (text) => {
	try {
		await toClipboard(text)
		showSuccessToast('复制成功')
	} catch (err) {
		showToast('复制失败')
	}
}

onMounted(() => {
	handleClearSearch()
})
</script>
